<?php
include_once('../global.php');
$show = $_GET['show'];
$roundtext = array(
  1 => '第一轮',
  2 => '第二轮',
  3 => '决赛轮',
  4 => '',
);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=GB2312">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="<?php echo CSS_PATH ?>index.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="<?php echo JS_PATH ?>jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="<?php echo JS_PATH ?>main.js"></script>
  <title>我的海报-<?php echo $match_cn_name ?></title>

  <style>
    /* 样式优化 */
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #0d2a35;
      color: white;
      display: flex;
      align-items: center;
      height: 100vh;
      overflow: scroll;
      flex-direction: column;
    }

    .index_news {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .poster-generator {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-bottom: 50px;
    }

    #posterCanvas {
      width: 90%;
      max-width: 656px;
      max-height: 978px;
      border-radius: 8px;
      background-color: #fff;
    }

    .poster-controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin-top: 20px;
    }

    .poster-controls button {
      padding: 12px 20px;
      font-size: 16px;
      background-color: #007b5e;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      max-width: 300px;
      min-width: 150px;
    }

    .poster-controls button:hover {
      background-color: #005944;
    }
    #sta {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      text-align: center;
    }

    #sta img {
      width: 250px;
      height: auto;
    }
  </style>
</head>

<body>
<div id="sta">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td style="text-align:center;"><img src="./images/000.png" style="width:350px;height:80px" /></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="index_news">
    <!-- 海报生成区域 -->
    <div id="poster-generator" class="poster-generator">
      <!-- 默认图片展示 -->
      <img id="defaultImage" src="./images/matcheventlisticon-11.png" style="display:none;" />
      <!-- 画布 -->
      <canvas id="posterCanvas" width="656" height="978"></canvas>
      <!-- 控制按钮 -->
      <div class="poster-controls">
        <input type="file" id="uploadImage" accept="image/*" style="display:none;" />
        <button id="uploadButton">重新上传</button>
        <button id="downloadPoster">下载海报</button>
        <button onclick="goback()">返回</button>

      </div>
    </div>
  </div>

  <script>
    // 初始化变量
    const canvas = document.getElementById('posterCanvas');
    const ctx = canvas.getContext('2d');
    const uploadButton = document.getElementById('uploadButton');
    const uploadImage = document.getElementById('uploadImage');
    const downloadPoster = document.getElementById('downloadPoster');
    const defaultImage = document.getElementById('defaultImage');

    // 默认背景图
    let backgroundImage = new Image();
    backgroundImage.src = defaultImage.src;

    // 确保图片加载完成后绘制
    backgroundImage.onload = () => {
      drawPoster();
    };

    uploadButton.addEventListener('click', () => {
      uploadImage.click();
    });

    uploadImage.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (event) => {
          backgroundImage.src = event.target.result;
        };
        reader.readAsDataURL(file);
      }
    });

    // 绘制海报
    function drawPoster() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制背景图片
      ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);

      // 添加标题
      ctx.fillStyle = '#fff';
      ctx.font = '24px Arial';


      // 绘制分数表格
      drawScoreTable();
    }

    // 绘制分数表格
    function drawScoreTable() {
      const tableX = 50; // 表格左上角X坐标
      const tableY = canvas.height - 200; // 表格左上角Y坐标
      const cellWidth = 60; // 单元格宽度
      const cellHeight = 40; // 单元格高度

      ctx.fillStyle = '#007b5e';
      ctx.fillRect(tableX, tableY, cellWidth * 9, cellHeight * 2);

      ctx.fillStyle = '#fff';
      ctx.font = '20px Arial';

      const scores = [
        [4, 3, 4, 2, 4, 3, 4, 4, 3], // 第一行分数
        [3, 5, 4, 3, 3, 4, 4, 5, 5] // 第二行分数
      ];

      scores.forEach((row, rowIndex) => {
        row.forEach((score, colIndex) => {
          const cellX = tableX + colIndex * cellWidth;
          const cellY = tableY + rowIndex * cellHeight;
          ctx.fillText(score, cellX + 20, cellY + 30);
        });
      });

      // 添加选手名称
      ctx.fillText('MATTHEW BALDWIN', tableX, tableY - 10);
    }

    // 下载海报
    downloadPoster.addEventListener('click', () => {
      const link = document.createElement('a');
      link.download = 'poster.png';
      link.href = canvas.toDataURL('image/png');
      link.click();
    });

    function goback() {
      window.history.back();
    }
  </script>
</body>

</html>